<template>
  <div>
    <h1>根据状态查看订单</h1>
    搜索内容(输入0-5)查看订单状态:
    <el-input class="ser" color="#999" v-model="query.status"></el-input>

    <el-button @click="find"> 点击查看 </el-button>

    <el-table :data="bannerlist1" style="width: 100%,height: 100%">
      <el-table-column prop="name" label="用户名" width="100" />
      <el-table-column prop="tel" label="用户电话" width="100" />
      <el-table-column prop="orderid" label="订单编号" width="150" />
      <el-table-column label="图片" width="100">
        <template #default="scope">
          <img class="img" :src="scope.row.img1" />
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="详细介绍" width="180" />
      <el-table-column prop="originprice" label="原价" width="100" />
      <el-table-column prop="status" label="状态码" width="100" />
    </el-table>
  </div>
</template>
    
    <script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";

interface ibanner {
  name: string;
  tel: string;
  orderid: string;
  proname: string;
  originprice: number;
  img1: string;
  status: number;
}
const query = reactive<{
  status: string;
}>({
  status: "",
});

let bannerlist1 = reactive<ibanner[]>([]);

const getbannerlist1 = () => {
  service({
    url: "http://118.178.238.19:3001/admin/order/list",
  }).then((res) => {
    if (res.data.code == "200") {
      bannerlist1.length = 0;
      // console.log(res.data.total);
      bannerlist1.push(...res.data.data);
    }
  });
};
getbannerlist1();

const find = reactive<string[]>([]);
const getfind = () => {
  service({
    url: "/order/statusList",
    params:{
        query
    }
  }).then((res) => {
    if (res.data.code == "200") {
      bannerlist1.length = 0;
      bannerlist1.push(...res.data.data);
    //   console.log(res.data);
      
    }
  });
};

getfind();
</script>
    
    <style scoped>
.ser {
  width: 100px;
}
.img {
  width: 100px;
  height: 100px;
}
</style>